﻿
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<!-- Meta Info -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Skydreamer HTML5 responsive vCard" /> 
	<meta name="keywords" content=" "/>
	<meta name="author" content="Anoop Jeewoolall"/>
	<title>Skydreamer HTML5 responsive vCard</title>
	<!-- End Meta Info -->
	
	<!-- Stylesheets (Css files)-->
	<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"/>  
	<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/flexslider.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/fancybox.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.qtip.min.css"/>
	<!-- End Stylesheets -->
	
	<!-- Google Font -->
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" />
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption" />

	<!-- End Google Fonts -->
	
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Scripts-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
	<script type="text/javascript" src="js/jquery.easytabs.min.js"></script>
	<script type="text/javascript" src="js/respond.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/jquery.adipoli.min.js"></script>
	<script type="text/javascript" src="js/bar-chart.js"></script>
	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
	<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
	<script type="text/javascript" src="js/custom.js"></script>
	<!-- End Scripts -->
</head>
<body>
	<!-- Main Wrapper -->
	<div id="container">
		<!-- Main Content -->
		<div id="content" >
			<!-- Header -->
			<header class="header striped">
				<!-- Logo -->
				<div class="logo">
					<h2><a href="#" title="Skydreamer vCard" class="title"><strong>Skydreamer</strong> vCard</a></h2>
				</div>
				<!-- End Logo -->
				<!-- Navigation -->
				<nav class="menu">
					<ul class="tabs">
						<li><a href="#profile" class="tab-profile" title="Profile">Profile</a></li>
						<li><a href="#resume" class="tab-resume" title="Resume">Resume</a></li>
						<li><a href="#portfolio" class="tab-portfolio" title="Portfolio">Portfolio</a></li>
						<li><a href="#contact" class="tab-contact" title="Contact">Contact</a></li>
					</ul>
				</nav>
				<!-- End Navigation -->
			</header>
			<!-- End Header -->	
			
			<!-- Hidden Logo that appears on lower resolution -->
			<div class="secondary-logo">
				<h2><a href="#" title="Skydreamer vCard"><strong>Skydreamer</strong> vCard</a></h2>
			</div>
			<!-- End Hidden Logo -->
				
			<!-- Profile Tab-->
			<section id="profile"> 
				<!-- Left Column-->
				<div class="onethird-column">				
					<!-- Responsive Image Slider (Flexslider)-->
					<div id="photo-slider" class="flexslider">
						<ul class="slides">
							<li><img src="img/homeslider/home-image1.jpg" alt="" /></li>
							<li><img src="img/homeslider/home-image2.jpg" alt="" /></li>
						</ul>
					</div>					
					<!-- End Slider -->
					<!-- Available Button-->
					<div class="available">
							<a href="#" title="Hire Me" class="available-button">I am available. <strong>Hire Me!</strong></a>
					</div>
					<!-- End Available Button-->					
				</div>
				<!-- End Left Column -->
					
				<!-- Start Right Column -->
				<div class="twothird-column">					
					<h2><span>Personal Info</span></h2>
					<p>Hey there! I am Ash Skydreamer from Mauritius island. Pellentesque habitant morbi tristique senectus netus malesuada fames ac turpis egestas. Donec sodales, dui id imperdiet porttitor. Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum rhoncus.</p>
					<!-- Personal Details -->
					<ul class="details">
						<li><span>Name</span> 		Ash Dreamer</li>
						<li><span>Birthday</span> December 02, 1988</li>
						<li><span>Address</span> 	Creative Avenue, Mauritius</li>
						<li><span>Email</span> 		<a href="mailto:contact@simplesphere.com">contact@contact.com</a></li>
						<li><span>Phone</span> 	+00 230 790-1171</li>
						<li><span>Website</span> <a href="http://www.simplesphere.net">www.simplesphere.net</a></li>
					</ul>
					<!-- End Details -->
					<div class="clear"></div>
					
					<h2><span>Recent Work</span></h2>
					<p>Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum.</p>
					<!-- Responsive Recent Work Carousel -->
					<div id="carousel-slider" class="flexslider">
						<ul class="slides">
							<li><a href="img/portfolio/portfolio1-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel1.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio2-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel2.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio3-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel3.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio4-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel4.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio5-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel5.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio6-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel6.jpg" class="grayscale" height="90" alt="" /></a></li>
							<li><a href="img/portfolio/portfolio7-large.jpg" class="fancybox" title="Portfolio Item Title"><img src="img/portfolio/home-carousel7.jpg" class="grayscale" height="90" alt="" /></a></li>
						</ul>
					</div>
					<!-- End Carousel -->						
				</div>		
				<!-- End Right Column -->
			</section>
			<!-- End Profile Tab --> 
               
			<!-- Start Resume Tab -->
			<section id="resume">
				<!-- Left Column-->
				<div class="half-column">
				<!-- Experience-->
					<h2><span>Experience</span></h2>					
					<div class="job-position">
						<h4>Art Director</h4>
					</div>
					<div class="job-details">
						<div class="curly-brace">{</div>
						<h4>Creative Designs Ltd <span>(2010- 2012)</span></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat nunc.</p>	
					</div>
					<div class="clear"></div>
					<div class="job-position">
						<h4>Web Designer</h4>
					</div>
					<div class="job-details">
						<div class="curly-brace">{</div>
						<h4>Simplesphere <span>(2008 - 2010)</span></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat nunc.</p>	
					</div>
					<!-- End Experience-->				
					<div class="clear"></div>	
					<!-- Sliding Testimonials -->
					<h2><span>Testimonials </span></h2>	
					<div id="testimonials" class="flexslider">
						<ul class="slides">
							<li>
								<p>Facilis explicari ea nec. Quis diceret at quo, in duo eros qusat. Molestie in, voluptua forensibus conclusionemque.</p><!-- Testimonials -->
								<span class="commentor"><strong>Luckas Rodrigues</strong>- Creative Designs</span><!-- Testimonials Author -->
							</li>
							<li>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum. </p>
								<span class="commentor"><strong>Martin Mcgram</strong> - Imagination Lane</span>
							</li>
							<li>
								<p>Faucibus quam nisl at erat. Cras lacus lacus, dapibus quis congue ac, placerat vel arcu.</p>
								<span class="commentor"><strong>Paula Johnson</strong> - Webber</span>
							</li>
							<li>
								<p>Nam liber tempor cum soluta nobis eleifend option congue nihil magna libero imperdiet arcu.</p>
								<span class="commentor"><strong>John Drak</strong> - Dreamers Design</span>
							</li>
						</ul>
					</div>
					<!-- End Testimonials -->
				</div>
				<!-- End Left Column -->
					
				<!-- Right Column -->
				<div class="half-column last">
					<!-- Education-->			
					<h2><span>Education</span></h2>
					<div class="education-details">
						<div class="curly-brace-right">}</div>
						<h4>Graphics University <span>(2008 - 2010)</span></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>	
					</div>							
					<div class="education-level">
						<h4>Bachelor of Web Design</h4>
					</div>
					<div class="clear"></div>
					<!-- End Education-->
					<h2><span>Skill set</span></h2>
					<!-- Skills Graph-->
					<table id="skill-rating" class="graphtable">
					<tr>
						<td>
							<div class="graph"></div>   
						</td>
						<td class="values">
							<label class="jquery">Jquery<span class="jquery">95</span></label>
							<label class="css3">Css3<span class="css3">65</span></label>
							<label class="html5">Html5<span class="html5">80</span></label>
							<label class="php">Php<span class="php">85</span></label>
							<label class="mysql">MySql<span class="mysql">50</span></label>
						</td>
					</tr>
					</table>
					<!-- End Skills Graph-->
					<div class="clear"></div>
				</div>
				<!-- End Right Column -->
			</section>
			<!-- End Resume Tab --> 

			<!-- Portfolio Tab -->
			<section id="portfolio">
				<h2><span>PortFolio</span></h2>
				<p>Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum rhoncus. Donec sodales, dui id imperdiet porttitor. Phasellus ac leo eget massa cursus.</p>
				<!-- Portfolio Filter -->
				<ul id="portfolio-filter">
				   <li><a href="#" class="current" data-filter="*">All</a></li>
				   <li><a href="#" data-filter=".webdesign">WebDesign</a></li>
				   <li><a href="#" data-filter=".photoghraphy">Photoghraphy</a></li>
				   <li><a href="#" data-filter=".illustration">Illustration</a></li>
				   <li><a href="#" data-filter=".print">Print</a></li>
				   <li><a href="#" data-filter=".animation">Animation</a></li>
				</ul>
				<!-- End Portfolio Filter -->
				<!--Portfolio Items -->
				<ul id="portfolio-list">
					<li class="illustration print">
						<div class="portfolio-description">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio1-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio1.jpg" alt="" />
					</li>
					
					<li class="animation print">
						<div class="portfolio-description red">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio2-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio2.jpg" alt="" />
					</li>

					<li class="animation illustraion">
						<div class="portfolio-description blue">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio3-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio3.jpg" alt="" />
					</li>
					
					<li class="webdesign print">
						<div class="portfolio-description green">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio4-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio4.jpg" alt="" />
					</li>	

					<li class="illustration print">
						<div class="portfolio-description red">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio5-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio5.jpg" alt="" />
					</li>
						
					<li class="illustration print">
						<div class="portfolio-description grey">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio6-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio6.jpg" alt="" />
					</li>
					
					<li class="photoghraphy">
						<div class="portfolio-description blue">
							<div class="portfolio-text">
								<h4>Project Title</h4>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nisi eget ultricies vestibulum.</p>
							</div>
							<a href="img/portfolio/portfolio7-large.jpg" class="fancybox zoom-item" title="Portfolio Item Title">View Image / Video</a>
						</div>
						<img src="img/portfolio/portfolio7.jpg" alt="" />
					</li>

				</ul>
				<!-- End Portfolio Items -->
				
				<!-- End Portfolio Items -->
			</section>
			<!-- End Portfolio -->
			
			<!-- Contact -->
			<section id="contact">
				<h2><span>Get in touch</span></h2>
				<!-- Google Map -->
				<div id="map"></div>
				<!-- End Google Map -->
				
				<!-- Contact Left Column -->
				<div class="onethird-column ">
					<h4><span>Contact details</span></h4>
					<!-- Social Icons -->
					<div class="social-bookmarks">
						<ul>
							<li class="twitter"><a href="#" title="Follow us on Twitter">twitter</a></li>
							 <li class="facebook"><a href="#" title="Find us on Facebook">facebook</a></li>
							 <li class="dribbble"><a href="#" title="Dribble">dribbble</a></li>
							 <li class="googleplus"><a href="#" title="Googleplus">googleplus</a></li>
							 <li class="flickr"><a href="#" title="Our Flickr Gallery">flickr</a></li>
							 <li class="linkedin"><a href="#" title="LinkedIn">linkedin</a></li>
						</ul>
					</div>
					<!-- End Social Icons-->
					<!-- Contact Details -->
					<ul class="contact-details">
						<li><span>Address</span> 	Creative Avenue, Mauritius</li>
						<li><span>Email</span> 		<a href="mailto:contact@simplesphere.com" title="Drop us an email">contact@contact.com</a></li>
						<li><span>Phone</span> 	+00 (230) 790-1171</li>
						<li><span>Website</span> <a href="http://www.simplesphere.net" title="Visit again">www.simplesphere.net</a></li>
					</ul>
					<!--End Contact Details -->
				</div>
				<!-- End Left Column -->
                
				<!-- Right Column -->
				<div class="twothird-column">
					<h4><span>Send a message</span></h4>
					<p>Cras dui velit, pharetra ut eleifend et, aliquet vitae velit. Donec at convallis est. Phasellus ac leo eget massa cursus congue quis pulvinar risus. Nam sed sem ligula. </p>
					<!-- Contact Form -->
					<form method="post" action="mail.php" name="contactform" id="contactform">
						<!-- Column Left -->
						<div class="column">
							<input type="text" id="name" name="name" class="input" placeholder="Your Name"/>
						</div>
						<!-- End Column -->
						<!-- Column Right -->
						<div class="column last">
							<input type="text" id="email" name="email" class="input" placeholder="Your Email"/>
						</div>
						<!-- End Column Right -->
						<textarea id="message" name="message" rows="6" class="textarea" placeholder="Your Message"></textarea>					
						<div class="clear"></div>
						<input type="submit" name="submit" value="Send your message" class="submit-button" />
					</form>
					<!-- /Contact Form -->
                 </div>
				<!-- End Right Column -->
			</section>				
			<!-- End Contact Tab -->
			
			<!-- Blue Strip -->  
			<div class="footer-strip"></div>
			<!-- End Blue Strip -->  
		</div>
		<!-- End MainContent -->

		<!-- Footer -->
		<footer class="footer">
           	<div class="copyright">Copyright © 2012 <a href="#" title="Skydreamer HTML5 responsive vCard">Skydreamer HTML5 responsive vCard</a></div>
		</footer>
		<!-- End Footer --> 
	</div>
	<!-- End Main Wrapper -->
	<!-- Pattern Selector -->
	<div class="styleswitcher">
		<p>Color scheme </p>
		<ul class="color-scheme">
			<li><a href="../red/index.html" class="red-theme"></a></li>
			<li><a href="../blue/index.html" class="blue-theme"></a></li>
			<li><a href="../orange/index.html" class="orange-theme"></a></li>
			<li><a href="../green/index.html" class="green-theme"></a></li>
		</ul>
		<p>Background </p>
		<ul class="background-selector">
			<li><img data-nr="0" src="img/pattern/pattern0.png" alt="" /></li>
			<li><img data-nr="1" src="img/pattern/pattern1.png" alt="" /></li>
			<li><img data-nr="2" src="img/pattern/pattern2.png" alt="" /></li>
			<li><img data-nr="3" src="img/pattern/pattern3.png" alt="" /></li>
			<li class="nomargin"><img data-nr="4" src="img/pattern/pattern4.png" alt="" /></li>
			<li class="nomargin"><img data-nr="5" src="img/pattern/pattern5.png" alt="" /></li>
			<li><img data-nr="6" src="img/pattern/pattern6.png" alt="" /></li>
			<li><img data-nr="7" src="img/pattern/pattern7.png" alt="" /></li>
			<li><img data-nr="8" src="img/pattern/pattern8.png" alt="" /></li>
			<li><img data-nr="9" src="img/pattern/pattern9.png" alt="" /></li>
		</ul>
	</div>
	<!-- End Pattern Selector -->		
</body>
</html>